import { useLayoutEffect, useRef, useState } from 'react'
import { createList } from './api'
import List from '../List'

interface Props {
  query: string
}

export default function SearchResults({ query }: Props) {
  const [list, setList] = useState<Array<string>>([])
  const timer = useRef<any>()

  useLayoutEffect(() => {
    timer.current = setTimeout(() => {
      console.log('xxx')
      setList(createList(query))
    }, 300)

    return () => {
      clearTimeout(timer.current)
    }
    
  }, [query])

  return (
    <List 
      list={list} 
      renderItem={(item) => (
        <Item key={item} text={item} />
      )}
    />
  )
}

function Item(props: { text: string }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {}

  return (
    <div>{props.text}</div>
  )
}